<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>校园交流平台</title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <!-- 引入vuejs -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 引入element样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入element组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--模板通用css-->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入wangEdit富文本编辑器 -->
    <script type="text/javascript" src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
    
</head>
<body>
    <el-container id="app" v-cloak>
            <div th:replace="fragment/common::header"></div>
            <div class="pad"></div>
            <el-card class="card">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item><a href="forum">校园论坛</a></el-breadcrumb-item>
                    <el-breadcrumb-item><a href="themelist">主题列表</a></el-breadcrumb-item>
                    <el-breadcrumb-item><a @click="toMainList">主贴列表</a></el-breadcrumb-item>
                    <el-breadcrumb-item>帖子详情</el-breadcrumb-item>
                </el-breadcrumb>
                <div style="margin-top: 20px;">
                    <div class="userinfo">
                        <img :src="mainPosts.imgpath" width="85px" height="85px" style="display: block;margin:5px auto;margin-top: 10px;">
                        <div class="textinfo"><el-link target="_blank" type="primary" :href="'showuserinfo?name='+mainPosts.createuser">楼主:{{mainPosts.createuser}}</el-link></div>
                        <div class="textinfo" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">主题名:{{mainPosts.themename}}</div>
                        <div class="textinfo">{{mainPosts.createtime}}</div>
                    </div>
                    <div class="content">
                        <h1 style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;height:50px;line-height:50px;width: 80%;">{{mainPosts.title}}</h1>
                        <el-button @click="dialogVisible = true" type="success" plain icon="el-icon-edit">跟帖</el-button>
                        <el-divider></el-divider>
                        <div v-html="mainPosts.content"></div>
                    </div>
                </div>
                <div v-for="(minor,index) in minorPostes">
                    <div style="clear: left;"></div>
                    <el-divider></el-divider>
                    <div>
                            <div class="userinfo">
                                    <img :src="minor.imgpath" width="85px" height="85px" style="display: block;margin:5px auto;margin-top: 10px;">
                                    <div class="textinfo"><el-link target="_blank" type="primary" :href="'showuserinfo?name='+minor.createuser">{{index+1}}楼:{{minor.createuser}}</el-link></div>
                                    <div class="textinfo">{{minor.createtime}}</div>
                                </div>
                                <div class="content">
                                    <div v-html="minor.content"></div>
                                </div>
                    </div>
                </div>
                
            </el-card>

        <el-dialog
            title="新增跟帖"
            width="80%"
            :close-on-click-modal="false"
            :visible.sync="dialogVisible"
            @opened="createEditer"
            center>
                <div id="editor">
                </div>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveMinorPosts">保 存</el-button>
                </span>
            </el-dialog>
        
    </el-container>
    <script th:inline="javascript">
        new Vue({
            el:'#app',
            data(){
                return{
                	activeIndex: '',
                    userName:'张三 ',
                    mainPosts:{},
                    minorPostes:[],
                    id:'',
                    dialogVisible: false,
                    dialogFirstOpen:true,
                    newMinorPosts:{}
                }
            },
            created:function(){
            	this.userName=[[${session.userName}]];
            	this.id=[[${id}]];
            	this.getMain();
            	
            },
            methods:{
            	//选择nav选项
            	handleSelect(key, keyPath){
                    switch(key){
                    case '1':
                    	window.location.href="index";
                    	break;
                    case '2':
                    	window.location.href="forum";
                        break;
                    case '3':
                    	window.location.href="blog";
                        break;
                    case '4-1':
                        window.location.href="http://www.dl-city.com/";
                        break;
                    case '4-2':
                        window.location.href="http://citytsg.dlut.edu.cn/index.htm";
                        break;
                    case '4-3':
                        window.location.href="http://cityftp.dlut.edu.cn/index.htm";
                        break;
                    case '4-4':
                        window.location.href="http://172.30.2.66/vod/action/indexListAction.do?method=indexShow";
                        break;
                    case '4-5':
                        window.location.href="http://tv.byr.cn/show";
                        break;
                    }
                },
                toMainList(){
                	window.location.href='mainpostslist?themeId='+this.mainPosts.themeid;
                },
                getMain(){
                	var _this=this;
                	$.ajax({
                		url:'mainpostsbyid',
                		type:'get',
                		data:{
                			id:_this.id
                		},
                		dataType:'json',
                		success:function(data){
                			_this.mainPosts=data;
                			_this.getMinor();
                		}
                	})
                },
                getMinor(){
                	var _this=this;
                    $.ajax({
                        url:'minorpostsbyid',
                        type:'get',
                        data:{
                            id:_this.mainPosts.id
                        },
                        dataType:'json',
                        success:function(data){
                            _this.minorPostes=data;
                        }
                    })
                },
                createEditer(){
                    var _this=this;
                    if(_this.dialogFirstOpen){
                        _this.dialogFirstOpen=false;
                        var E = window.wangEditor;
                        editor = new E('#editor');
                        editor.customConfig.zIndex = 1;
                        // 自定义菜单配置
                        editor.customConfig.menus = [
                            'head',  // 标题
                            'bold',  // 粗体
                            'fontSize',  // 字号
                            'fontName',  // 字体
                            'italic',  // 斜体
                            'underline',  // 下划线
                            'strikeThrough',  // 删除线
                            'foreColor',  // 文字颜色
                            'backColor',  // 背景颜色
                            'link',  // 插入链接
                            'list',  // 列表
                            'justify',  // 对齐方式
                            'quote',  // 引用
                            'emoticon',  // 表情
                            'image',  // 插入图片
                            'code',  // 插入代码
                            'undo',  // 撤销
                            'redo'  // 重复
                        ]
                        editor.customConfig.uploadImgServer = 'blogimageupload';
                        editor.customConfig.uploadFileName = 'blogimage';
                        editor.customConfig.uploadImgHooks = {
                                customInsert: function (insertImg, result, editor) {
                                    var url=result.data[0];
                                    insertImg(url);
                                }
                        };
                        editor.customConfig.customAlert = function (info) {
                            _this.$message.error("图片插入失败");
                        };
                        editor.create();
                    }
                },
                //保存跟帖
                saveMinorPosts(){
                	var _this=this;
                	_this.newMinorPosts.content=editor.txt.html();
                	_this.newMinorPosts.mainid=_this.mainPosts.id;
                	var param=JSON.stringify(_this.newMinorPosts);
                	$.ajax({
                        url:'saveminorposts',
                        type:'POST',
                        data:param,
                        contentType:'application/json;charset=UTF-8',
                        dataType:'JSON',
                        success:function(data){
                        	_this.getMinor();
                        	_this.newMinorPosts={};
                        	editor.txt.clear();
                        	_this.dialogVisible = false;
                        	_this.$message.success("保存成功");
                        }
                    });
                }
                
                
                
            }
        })
    </script>
    <style>
        .card{
            width: 80%;
            margin: 0 auto;
        }
        .userinfo{
		    float: left;
		    width: 20%;
		}
		.content{
		    float: left;
		    width: 78%;
		}
		.textinfo{
		    color: #606266;
		    text-align: center;
		    font-size: 13px;
		    line-height: 13px;
		    margin-bottom: 10px;
		}
    </style>
</body>
</html>